import React, {Component} from 'react';
import {Popup, Tab,Button,Group,Field ,NumberPicker,SelectField, TextField,NoticeBar,CheckboxField } from 'saltui';
import Number from  '../../room/Number'

/**
 *  <CheckIn room   buttonName >
 */
export default class ServiceBackAdd extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
      data:{
        id:1,
        name:this.props.name,
        number:this.props.number
      }
    };
    this.state.buttonName = this.props.buttonName;

  }

  handleTextChange = (value) =>{
    let data = this.state.data;
    data.name = value;
    this.setState({data:data});
  }

  handleSave = () =>{
    Toast.show({
      type: 'loading',
      content: '保存中...',
      autoHide:false
    });

    setTimeout(() => {
      Ajax.post("finance/tip/save",this.state.data);
      Toast.hide(() => {
      });

      Toast.show({
        type: 'loading',
        content: '保存成功',
      });

      Popup.hide();
      this.props.onChange();

    }, 2000);
  }



  render() {
    return <Button type="secondary"  size="small" onClick={() => {
      Popup.show(<div className="demo-popup-container">     <Group.List >

           <Field label="服务费" tip={<div>输入服务费名字</div>}>
            <div>
             <InputText value={this.state.data.name} onChange={this.handleTextChange}  />
            </div>
          </Field>


        </Group.List>
<div className="notice-div">
  <NoticeBar className="noticeMessage" message={"totol:$4445.555"} closable={false} type="warning" />
</div>
        <div className="demo-line">
          <Button type="secondary"  size="small"  >提交</Button>
          <Button type="secondary"  size="small"  >取消</Button>
        </div></div>, {
        animationType: 'slide-down',
      });
    }} >{this.state.buttonName}</Button>
  }
}
